<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <strong>{{obj.name}}</strong>
        <strong>{{obj.age}}</strong>
        <strong>{{obj.wife}}</strong>
        <strong>{{msg}}</strong>
        <button @click="clickFn">click</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            obj:{
                name:"damu",
                age:"",
                wife:""
            }
        },
        methods:{
            clickFn(){
                // Vue 无法检测 property 的添加(Object.defineProperty无法检测 property 的添加)
                // this.obj.age = 18
                // Vue.set(this.obj,"age",18)
                // this.$set(this.obj,"age",18)

                // this.msg = "msg"
                // Vue.set(this,"msg","msg")

                //Vue 无法检测 property 的删除(Object.defineProperty无法检测 property 的删除)
                // delete this.obj.name
                // Vue.delete(this.obj,"name")
                // this.$delete(this.obj,"name")

                // delete this.obj;
                // Vue.delete(this,"obj")


                //新增多个属性!!!
                // Object.assign(this.obj,{ age: 18, wife: "zdy" })
                this.obj = Object.assign({},this.obj,{ age: 18, wife: "zdy" })
                /*this.$set(this.obj,"age",18)
                this.$set(this.obj,"wife","zdy")*/
            }
        }
    })
</script>
</html>